/** @jsxImportSource @emotion/react */
import * as React from "react";
import {css} from "@emotion/react";
import {
    CCell, Cell, Table, TableBody, TableRow, Text, TableHead, BlobInputList,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {FootMenRow, } from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {tail宏观, } from "./orcBase";

const items检验项 = [
    ['端头型', [{t:'结构检验',s:4}], '端头型式', ],
    ['头筒过渡', [{}], '端头与筒体的连接过渡', ],
    ['整支承', [{}], '瓶组整体支承或者支座的型式与布置', ],
    ['排放装', [{}], '附件排放装置的设置', ],
    ['瓶体长', [{t:'几何尺寸',s:2}], '瓶体长度' ],
    ['外径差', [{}], '瓶体的外径偏差' ],
    ['瓶钢印', [{t:'内外部宏观检查',s:5}], '铭牌和气瓶钢印标志' ],
    ['外表腐', [{}], '外表面是否存在裂纹、腐蚀、凹陷、火焰灼伤、鼓包、机械损伤、颈部折叠' ],
    ['内表腐', [{}], '内表面是否存在裂纹、腐蚀、鼓包、皱折、机械损伤' ],
    ['螺纹裂', [{}], '瓶口内、外螺纹是否存在裂纹、腐蚀、磨损、其他损伤' ],
    ['基础下沉', [{}], '支承、支座或者基础的下沉、倾斜、开裂' ],
    ['端塞腐', [{t:'附件检验',s:3}], '气瓶端塞有无腐蚀、裂纹或者其他损伤', ],
    ['管变形', [{}], '管路有无变形、裂纹、凹陷、扭曲或者其他损伤',  ],
    ['阀泄漏', [{}], '阀门是否存在腐蚀、变形、泄漏，开闭是否正常', ],
];

export const itemA宏观项: string[] = ['宏观结果' ];
items检验项.forEach(([name, title, initIsp], i: number) => {
    itemA宏观项.push(name as string);
});
export const 检查结果选=['√', '×', '—', '无此项'];
const 检果选= ['1、用内窥镜（型号：IV9635RX，编号：QZC0081）从容器检查孔检查，可视部位未见超标缺陷。\n' +
        '2、所检项目未见异常。\n' +
        '3、检测结果为1级。',
];
interface Props extends InternalItemProps {
    part?: number;
}
export const Macroscopic =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, part=1}: Props, ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        const [getInpFilter] = useMeasureInpFilter(null, itemA宏观项,);
        const config=items检验项;
        const titNode=useOmnipotentPrefTitle({config, });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}：</Text>
                {config.map(([name, _1, _2, unit]: any, i: number) => {
                    return (<React.Fragment key={i}>
                        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                            {titNode[i]}
                            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                                检验结果：
                                <BlobInputList value={inp?.[name]?.r || ''} datalist={检查结果选} rows={1}
                                               style={{display: 'inline-flex', width: '9rem', maxWidth: '100%', fontSize: '1rem',}}
                                               listStyle={css({fontSize: '1rem',})}
                                               onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                            </div>
                            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                                备注：
                                <BlobInputList value={inp?.[name]?.m || ''}  rows={2}
                                               style={{display: 'inline-flex', width: '16rem', maxWidth: '100%',}}
                                               onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                            </div>
                        </div>
                    </React.Fragment>);
                })}
                <hr/>
                检验结果：
                <BlobInputList value={inp?.宏观结果 || ''}  rows={6} datalist={检果选}
                               onListChange={v => setInp({ ...inp, 宏观结果: v || undefined})}/>
                {children}
            </InspectRecordLayout>
        );
});

const tailRender = (orc: any, name: string, lix: number, unit: any) => {
    const nneedbig = orc?.[name]?.r?.length >= 3 || (!orc?.[name]?.r);
    return <>
        <CCell><Text css={{fontSize: nneedbig ? '0.875rem' : '1.15rem'}}>{orc?.[name]?.r ?? '／'}</Text></CCell>
        <CCell>{orc?.[name]?.m ?? '／'}</CCell>
    </>;
}
export const MacroscopicVw = ({orc, rep}: { orc: any, rep: any }
) => {
    const [renderP1] = useOmnipotentPrefCs({orc, config: items检验项,
            tag:'MacrosItms', tailRender, pcols: 1, noNo: false, unitCel: false});
    return <>
        <div css={{"@media print": {paddingBottom: '5.5rem', pageBreakInside: 'avoid'}}}>
            <Text id='Macroscopic' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>宏观检验报告</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text>使用证号：{orc?.使用证号}</Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["3.6%", "9%", "%",  "15%","21%"] }
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-5.5rem'}}} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>检 验 项 目</CCell><CCell>检查结果</CCell><CCell>备注</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'Macroscopic'}>
                    {renderP1}
                    <TableRow>
                        <Cell split={true} colSpan={5}>
                            <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                                &nbsp; 检验结果：<br/>{orc?.宏观结果 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
            <FootMenRow span={5} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
        </Table>
        {tail宏观}
    </>;
};
